<template>
	<div class="teacher-container">
		<el-form ref="queryParams" :model="queryParams" :inline="true" class="query-bar">
			<div class="query-row demo-form-inline">
				<el-form-item label="学院">
					<el-select v-model="queryParams.collegeId" filterable placeholder="请选择" @change="collegeChange">
						<el-option label="全部" value=""></el-option>
						<el-option v-for="college in collegeList" :key="college.id" :label="college.collegeName" :value="college.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="专业">
					<el-select v-model="queryParams.specialtyId" filterable placeholder="请选择" @change="specialtyChange">
						<el-option label="全部" value=""></el-option>
						<el-option v-for="specialty in specialityList" :key="specialty.id" :label="specialty.specialtyName" :value="specialty.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="姓名/手机号">
					<el-input maxlength="20" v-model="queryParams.searchWord" placeholder="请输入" @input="query"></el-input>
				</el-form-item>
			</div>
		</el-form>
		<div class="tags-row">
			<el-tag v-for="(name,index) in selectedTeacherName" :key="index" closable @close="tagClose(index)">{{name}}</el-tag>
		</div>
		<div class="lx-table">
			<lx-table ref="teacherTable" :tableData="teacherList" :tableCols="tableCols" isSelection isIndex :currentPage="queryParams.currentPage"
			 :total="queryParams.total" :pageSize="queryParams.numPerPage" @sizeChange="sizeChange" @currentChange="currentChange"
			 :isBatchDel="false" layout="total, prev, pager, next, jumper" :showSelectInfo="false" @select="selectTeacher">
			</lx-table>
		</div>
	</div>
</template>

<script>
	import LxTable from "@/components/LxTable.vue"
	export default {
		components: {
			"lx-table": LxTable,
		},
		created() {
			this.getCollegeList();
			this.getTeacherList();
		},
		data() {
			return {
				queryParams: {
					collegeId: null,
					specialtyId: null,
					searchWord: "",
					numPerPage: 5,
					currentPage: 1,
					isHaveRole:false,
					total: 0
				},
				tableCols: [{
						label: '教师姓名',
						prop: 'teacherName',
						align: "center",
						width: "400"
					},
					{
						label: '手机号',
						prop: 'teacherPhone',
					},
					{
						label: '所属学院',
						prop: 'collegeName',
					},
					{
						label: '所属专业',
						prop: 'specialtyName',
					}
				],
				collegeList: [],
				specialityList: [],
				teacherList: [],
				selectedTeacherName:[],
				selectedTeacherId:[]
			}
		},
		methods: {
			currentChange(val) {
				this.queryParams.currentPage = val;
				this.getTeacherList();
			},
			sizeChange(val) {
				this.queryParams.numPerPage = val;
				this.queryParams.currentPage = 1;
				this.getTeacherList();
			},
			query() {
				this.queryParams.currentPage = 1;
				this.getTeacherList();
			},
			collegeChange(val) {
				this.queryParams.collegeId = val;
				this.queryParams.currentPage = 1;
				this.queryParams.specialtyId = null;
				this.getSpecialityList();
				this.getTeacherList();
			},
			specialtyChange(val) {
				this.queryParams.specialtyId = val;
				this.queryParams.currentPage = 1;
				this.getTeacherList();
			},
			async getCollegeList() {
				let ret = await this.$api.getColleges();
				if (ret) {
					this.collegeList = ret.data.list;
				}
			},
			async getSpecialityList(_isEdit) {
				let data;
				if (_isEdit) {
					data = this.editForm.collegeId;
				} else {
					data = this.queryParams.collegeId;
				}
				let ret = await this.$api.getSpecialtys({
					collegeId: data
				});
				if (ret) {
					if (_isEdit) {
						this.editSpecialityList = ret.data.list;
					} else {
						this.specialityList = ret.data.list;
					}

				}
			},
			async getTeacherList() {
				let ret = await this.$api.getTeacherBasics(this.queryParams);
				if (ret) {
					this.teacherList = ret.data.list;
					this.queryParams.total = ret.data.total;
				}
			},
			selectTeacher(selectedList,selectedIdList){
				if(selectedIdList ){
					this.selectedTeacherId = JSON.parse(JSON.stringify(selectedIdList));
					let selectedTeacherName = [];
					for(let i = 0 ; i < selectedList.length ; i++){
						selectedTeacherName.push(selectedList[i].teacherName);
					}
					this.selectedTeacherName = selectedTeacherName;
				}else{
					this.selectedTeacherId = []
					this.selectedTeacherName = [];
				}
			
			},
			tagClose(index){
				let id = this.selectedTeacherId[index];
				this.selectedTeacherName.splice(index,1);
				this.selectedTeacherId.splice(index,1);
				this.$refs.teacherTable.cancleSelected(id);
			},
			getSelectInfo(){
				return this.selectedTeacherId;
			}

		}
	}
</script>

<style lang="scss" scoped="scoped">
	.teacher-container {
		@include flex-column(flex-start, flex-start);
		.query-bar .query-row{
			justify-content: flex-start;
			margin-bottom: 14px;
		}
		// box-sizing: border-box;
		.lx-table {
			width: 100%;
		}
		
		.tags-row{
			width: 100%;
			padding: 16px;
			box-sizing: border-box;
			@include flex-row(flex-start, flex-start);
			flex-wrap: wrap;
			
			.el-tag{
				margin-right: 8px;
				margin-top: 4px;
			}
		}

	}

	.two-column-form {
		display: flex;
		flex-direction: row;
	}
</style>
